<template>
  <div class="message-app">
    <!-- 标题栏 -->
    <div class="header-bar">
      <div class="header-title">我的消息</div>
      <div class="header-actions">
        <t-button theme="default" shape="square" variant="text">
          <template #icon><more-icon /></template>
        </t-button>
      </div>
    </div>

    <!-- 卡片式消息列表 -->
    <div class="list-container">
      <div class="card-list">
        <div 
          v-for="(msg, index) in messages" 
          :key="index" 
          class="message-card"
          @click="openChat(msg)"
        >
          <div class="card-avatar">
            <img :src="msg.avatar" alt="头像">
            <t-badge v-if="msg.unread" :count="msg.unread" class="unread-badge" />
          </div>
          <div class="card-content">
            <div class="card-header">
              <span class="card-sender">{{ msg.sender }}</span>
              <span class="card-time">{{ msg.time }}</span>
            </div>
            <div class="card-message">{{ msg.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MoreIcon } from 'tdesign-icons-vue-next';

// 模拟消息数据
const messages = ref([
  {
    sender: '张三',
    content: '你好，最近怎么样？',
    avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
    time: '10:30',
    unread: 2
  },
  {
    sender: '李四',
    content: '项目文档我已经发给你了',
    avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
    time: '昨天',
    unread: 0
  },
  {
    sender: '王五',
    content: '周末一起吃饭吗？',
    avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
    time: '星期三',
    unread: 5
  },
  {
    sender: '系统通知',
    content: '您有新的版本可以更新',
    avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar_system.png',
    time: '7月20日',
    unread: 0
  }
]);

const openChat = (msg: any) => {
  console.log('打开聊天', msg.sender);
};
</script>

<style scoped>
.message-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5; /* 添加背景色 */
}

/* 标题栏样式 */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--td-bg-color-container);
  border-bottom: 1px solid var(--td-component-stroke);
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--td-text-color-primary);
}

/* 列表容器 */
.list-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* 卡片列表样式 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 卡片间距 */
}

/* 消息卡片样式 */
.message-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 头像区域 */
.card-avatar {
  position: relative;
  margin-right: 12px;
}

.card-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* 卡片内容区域 */
.card-content {
  flex: 1;
  min-width: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.card-sender {
  font-size: 16px;
  font-weight: 500;
  color: var(--td-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-time {
  font-size: 12px;
  color: var(--td-gray-color-6);
}

.card-message {
  font-size: 14px;
  color: var(--td-text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 定义高度变量 */
:root {
  --td-navbar-height: 52px; /* 导航栏高度 */
  --td-header-bar-height: 52px; /* 标题栏高度 */
}
</style>